<template>
  <el-radio-group v-model="localValue" @change="change" v-if="type === 'radio'">
    <el-radio
        v-for="item in options"
        :key="item[valueKey]"
        :label="item[valueKey]"
        :border="border"
    >
      {{ item[labelKey] }}
    </el-radio>
  </el-radio-group>

  <el-checkbox-group v-model="localValue" @change="change" v-else-if="type === 'checkbox'">
    <el-checkbox
        v-for="item in options"
        :key="item[valueKey]"
        :label="item[valueKey]"
        :border="border"
    >
      {{ item[labelKey] }}
    </el-checkbox>
  </el-checkbox-group>

  <el-select
      v-else
      placeholder="可搜索"
      :clearable="clearable"
      v-model="localValue"
      :loading="loading"
      v-bind="$attrs"
      @clear="clear"
      @change="change"
      @visible-change="visibleChange"
      :filter-method="filterMethod"
      filterable
  >
    <el-option
        v-for="item in options"
        :key="item[valueKey]"
        :label="item[labelKey]"
        :value="item[valueKey]"
    />
  </el-select>
</template>

<script>
import {initDictTag} from "@/api/dist";
import { mapGetters } from 'vuex';

export default {
  name: "OlDictTag",
  props: {
    border: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'select'
    },
    code: String,
    like: String,
    clearable: {
      type: Boolean,
      default: true
    },
    dictType: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: 'dictLabel'
    },
    valueKey: {
      type: String,
      default: 'dictValue'
    },
    orderBy: {
      type: Array,
      default: () => []
    },
    groupBy: Array,
    whereAnd: {
      type: Array,
      default: () => []
    },
    whereOr: {
      type: Array,
      default: () => []
    },
    disabledInit: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    value: {
      required: true
    }
  },

  model: {
    event: 'change'
  },

  inject: ['http'],

  data() {
    return {
      show: true,
      loading: false,
      ex: 0,
      localValue: this.processValue(this.value),
      options: [],
      optionsBk: [],
      isDictTable: false,
      dictTypeStore: null
    };
  },

  computed: {
    labelKey() {
      return this.label || 'dictLabel';
    },
    valueProp() {
      return this.valueKey || 'dictValue';
    },
    ...mapGetters('dict', {
      dictVal: 'val'
    }),
    ...mapGetters('dictType', {
      dictTypeVal: 'val'
    })
  },

  watch: {
    value(newVal) {
      this.localValue = this.processValue(newVal);
    }
  },

  created() {
    if (!this.disabledInit) {
      this.init();
    }
  },

  methods: {
    processValue(val) {
      if (this.type === 'checkbox') {
        return Array.isArray(val) ? val : [String(val)];
      }
      return val != undefined ? String(val) : '';
    },
    doFilterMethod(query) {
      if (this.optionsBk.length === 0) {
        this.optionsBk = this.options;
      }
      this.options = this.optionsBk.filter(option =>
          option[this.labelKey].toLowerCase().includes((query || '').trim().toLowerCase())
      );
    },

    async getParameter(valueData) {
      const code = this.code.split(",");
      const parameter = {
        dbName: code[0],
        tableName: code[1],
        label: code[2],
        value: code[3],
        orderByStr: this.orderBy,
        groupBy: this.groupBy,
        whereAnd: [...this.whereAnd],
        whereOr: [...this.whereOr]
      };

      if (valueData) {
        this.loading = true;
        try {
          const data = await initDictTag(this.http, parameter);
          this.options = data;
          // 处理初始值逻辑...
        } finally {
          this.loading = false;
        }
      }
      return parameter;
    },

    async filterMethod(query) {
      if (!this.isDictTable) {
        this.doFilterMethod(query);
      } else {
        this.ex++;
        // 处理远程搜索逻辑...
      }
    },

    async init() {
      if (this.code) {
        const code = this.code.split(",");
        if (code.length < 3) {
          let options = this.dictVal(this.code);
          this.setDefault(options);
          this.options = options;
        } else {
          this.isDictTable = true;
          this.getParameter(true);
        }
      } else if (this.dictType) {
        this.options = this.dictTypeVal();
      } else {
        this.options = this.data;
      }
    },

    setDefault(options) {
      setTimeout(() => {
        if (options == undefined || (this.localValue != undefined && this.localValue != "")) {
          return
        }
        for (let o of options) {
          if (o.isDefault == "1") {
            this.change(o.dictValue)
            return;
          }
        }
      }, 200)
    },

    clear() {
      this.filterMethod();
    },

    change(value) {
      this.localValue = value;
      this.$emit('change', value);
      this.$emit('input', value);
    },

    visibleChange(visible) {
      if (!visible) this.ex = 0;
    },

    getLabel(code) {
      // 标签获取逻辑...
    },

    getObj(code) {
      // 对象获取逻辑...
    }
  }
};
</script>
